<template>
  <zm-body>
    <!-- left -->
    <div class="app-lefter-bg"></div>
    <div class="app-bottom-bg"></div>
    <div class="app-right-bg"></div>
    <div class="index-lefter">
      <ul class="index-nums-list">
        <li
                class="animated"
                v-for="(item,index) in indexNums"
                :class="[{active:index===activeNum},{fadeInDown:index<3},{fadeInUp:index>2}]"
                :key="item.id"
                @click="indexNumClickHandler(item,index)"
        >
          <div class="num">
            <count-to :startVal="0" :endVal="item.value || 0" :duration="2000"></count-to>
          </div>
          <div class="label">{{item.label}}</div>
        </li>
      </ul>
    </div>
    <!-- end left -->
    <!-- bottom -->
    <div class="index-bottom">
      <zm-box1 title="事件、部件">
        <div class="index-dashboard">
          <div class="index-dashboard-box">
            <div ref="dashboard1" style="height:11rem;width:100%"></div>
            <div class="index-dashboard-nums">
              <ul>
                <li>
                  <div class="num">{{ sjcz }}</div>
                  <div class="label">处置</div>
                </li>
                <li>
                  <div class="num">{{ sjycz }}</div>
                  <div class="label">应处置</div>
                </li>
                <li>
                  <div class="num">{{ sjczl }}%</div>
                  <div class="label">处置率</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="index-dashboard-box">
            <div ref="dashboard2" style="height:11rem;width:100%"></div>
            <div class="index-dashboard-nums">
              <ul>
                <li>
                  <div class="num">{{ bjcz }}</div>
                  <div class="label">处置</div>
                </li>
                <li>
                  <div class="num">{{ bjycz }}</div>
                  <div class="label">应处置</div>
                </li>
                <li>
                  <div class="num">{{ bjczl }}%</div>
                  <div class="label">处置率</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </zm-box1>
      <zm-box1 title="问题来源">
        <div class="index-pie">
          <div class="index-pie-box1">
            <div ref="indexPie" style="height:15rem;width: 80%"></div>
            <div class="index-tuli">
              <img src="../../../public/images/echarts.png" alt="" width="180px">
            </div>
          </div>
          <!-- <div class="index-pie-box2">dfsdf</div> -->
        </div>
      </zm-box1>
    </div>
    <!-- bottom -->
    <!-- right -->
    <div class="chaxuntiaojian">
      <div class="filter-box-common">
        <el-select v-model="value" placeholder="请选择">
          <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="index-right">
      <zm-box2 title="高发问题">
        <!-- <img src="images/chart-demo1.png" width="90%" alt=""> -->
        <div ref="rightBarChart1" class="index-right-chart-box"></div>
      </zm-box2>
      <zm-box2 title="高发区域">
        <!-- <img src="images/chart-demo2.png" width="90%" alt /> -->
        <div ref="rightBarChart2" class="index-right-chart-box"></div>
      </zm-box2>
      <zm-box2 title="高发时段趋势">
        <!-- <img src="images/chart-demo3.png" width="90%" alt /> -->
        <div ref="rightLineChart" class="index-right-chart-box"></div>
      </zm-box2>
    </div>
    <!-- end right -->
    <div
            v-loading="mapDataLoading"
            id="mapBox"
            :class="{ready:mapReady}"
            class="main-body-mapbox"
            style="height:100vh;width:100vw"
    ></div>
    <div class="changeTc pointer">
      <img src="../../../public/images/cluster.png" alt="" @click="showHotMap" v-show="!showHot">
      <img src="../../../public/images/hot.png" alt="" @click="showHotMap" v-show="showHot">
    </div>
  </zm-body>
</template>

<script>
  /*
     功能模块  首页
     创建人    zgf
     更新时间  2020/04/14
     备注
  */
  var map,object3Dlayer;


  export default {
    name: "Home",
    data() {
      return {
        options: [{
          value: '当月',
          label: '当月'
        }, {
          value: '近7天',
          label: '近7天'
        }, {
          value: '当年',
          label: '当年'
        }],
        value: '当月',
        activeNum: 0,
        indexNums: [
          { id: 1, label: "上报", value: 0 },
          { id: 2, label: "立案", value: 0 },
          { id: 3, label: "结案", value: 0 },
          { id: 4, label: "人员", value: 0 },
          { id: 5, label: "车辆", value: 0 },
          { id: 6, label: "监控", value: 0 }],
        mapDataLoading: false,
        dashboard1: null,
        dashboard2: null,
        markersList: [],
        mapReady: false,
        indexPieChart: null,
        rightBarChart1: null,
        rightBarChart2: null,
        mapPoints: [],
        rightLineChart: null,
        firsttime: "",
        lasttime: "",
        wtlxArr: [],//问题类型
        sjycz: 0,//事件应处置
        sjcz: 0,//事件处置
        sjczl: 0,//事件处置率
        bjycz: 0,//部件应处置
        bjcz: 0,//部件处置
        bjczl: 0,//部件处置率
        jhArr: [],//聚合用数组
        showHot: true,
        heatmap: null,
        showFilterBody: false,
        filterForm: {
          caseCode: "",
          region: "",
          monitor: "",
          startDate: "",
          endDate: "",
          selectedType: ""
        },
        regionList: [],
        typeOptions: [],

        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value2: '',
        sqArrs: [
            { id: 1, title: "西杜兰村", code: 3082, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 2486, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 3347, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 1228, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 1960, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 4360, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 4596, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 891, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 2005, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 3950, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 13065, position: [116.60880165103403,40.11908859518438] }
          ]
      };
    },
    computed: {
      filterResult() {
        let selectZhenIndex = -1;
        let selectCunIndex = -1;
        let selectStr = "";
        console.log(this.selectedType);
        if (!this.typeOptions.length) return "";
        if (this.filterForm.selectedType.length > 1) {
          selectZhenIndex = this.typeOptions.findIndex(
                  item => item.value === this.filterForm.selectedType[0]
          );
          selectCunIndex = this.typeOptions[selectZhenIndex].children.findIndex(
                  item => item.value === this.filterForm.selectedType[1]
          );
          selectStr =
                  this.typeOptions[selectZhenIndex].label +
                  " / " +
                  this.typeOptions[selectZhenIndex].children[selectCunIndex].label;
        }
        return selectStr;
      }
    },
    mounted() {
      // this.getIndexdata();
      let sxtSql = runSQLJd("select count(*) as num from gis.jksxt;");
      if(sxtSql[0].length){
        this.indexNums[5].value = sxtSql[0][0].NUM//摄像头
      }
      this.$nextTick(() => {
        setTimeout(()=>{
          this.mapInit();
        },1000)
      });
    },
    created(){
      let humancode = window.location.href.substring(window.location.href.indexOf("humancode=")+10, window.location.href.indexOf("#"))
      localStorage.setItem("humancode", humancode)
      //初始化默认当月
      let d = new Date();
      this.firsttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+1;
      var day3 = new Date();
      day3.setTime(day3.getTime()+24*60*60*1000);
      this.lasttime = day3.getFullYear()+ "-" + ((day3.getMonth()+1)<10?"0"+(day3.getMonth()+1):(day3.getMonth()+1)) + "-" + (day3.getDate()<10?"0"+(day3.getDate()):(day3.getDate())) + " 00:00:00"
      let wtlx = "",dl=""
      this.getIndexData(this.firsttime, this.lasttime, wtlx, dl)
      /*********/
      //this.getSqDataNum(this.firsttime, this.lasttime)
    },
    watch: {
      value(n, o){
        let d = new Date();
        let wtlx = "",dl=""
        if(n == "当月"){
          this.firsttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+1;
          this.lasttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+(d.getDate()+1);
          this.getIndexData(this.firsttime, this.lasttime, wtlx, dl)
          this.hotMap(this.firsttime, this.lasttime)
          this.showHot = true
        }else if(n == "近7天"){
          let s = d.getTime() - 3600 * 1000 * 24 * 7
          this.firsttime = new Date(s).getFullYear()+"-"+(new Date(s).getMonth()+1)+"-"+(new Date(s).getDate());
          this.lasttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
          this.getIndexData(this.firsttime, this.lasttime, wtlx, dl)
          this.hotMap(this.firsttime, this.lasttime)
          this.showHot = true
        }else if(n == "当年"){
          this.firsttime = d.getFullYear()+"-01-01";
          this.lasttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate();
          this.getIndexData(this.firsttime, this.lasttime, wtlx, dl)
          this.hotMap(this.firsttime, this.lasttime)
          this.showHot = true
        }
      }
    },
    methods: {
      mapInit() {
        const self = this;
        const AMap = window.AMap;
        map = new AMap.Map("mapBox", {
          mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
          viewMode: "3D",
          turboMode: true,
          defaultCursor: "pointer",
          showBuildingBlock: true,
          expandZoomRange: true,
          zooms: [3, 20],
          zoom: 14,
          pitch: 55,
          center: [116.62592150459062,40.12052892354556],
          forceVector: true
        });

        //热力图
        let d = new Date();
        this.firsttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+1;
        this.lasttime = d.getFullYear()+"-"+(d.getMonth()+1)+"-"+(d.getDate()+1);
        this.hotMap(this.firsttime, this.lasttime)
        // this.heatmap.hide()
        //高德三维控件
/*        map.addControl(new AMap.ControlBar({
          showZoomBar:false,
          showControlButton:true,
          position:{
            right:'30%',
            top:'120px'
          }
        }))*/
        //canvas
    /*    var canvas = document.createElement('canvas');
        canvas.width = canvas.height = 400;
        var context = canvas.getContext('2d')
        context.fillStyle = 'rgb(255,107,1)';
        context.strokeStyle = 'white';
        context.globalAlpha = 1;
        context.lineWidth = 2;

        var radious = 0;
        var draw = function () {
          context.clearRect(0, 0, 400, 400)
          context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1;
          radious = (radious + 1) % 100;

          context.beginPath();
          context.arc(100, 100, radious, 0, 2 * Math.PI);
          context.fill();
          context.stroke();

          //2D视图时可以省略
          CanvasLayer.reFresh();

          AMap.Util.requestAnimFrame(draw);
        };

        var CanvasLayer = new AMap.CanvasLayer({
          canvas: canvas,
          bounds: new AMap.Bounds(
                  [116.607194,40.118044],
                  [116.620479,40.12048]
          ),
          zooms: [3, 18],
        });

        CanvasLayer.setMap(map);
        draw();*/

        this.addMarkerToMap8({
          position: [116.610756,40.119521]
        });
        // this.addMarkerToMap7({
        //   position: [116.610847,40.119258]
        // });

        setTimeout(() => {
          this.mapReady = true;
        }, 1000);
        let uUrl = this.baseUrl.WgUrl;//window.location.hostname == "11.43.250.2" ? (window.location.hostname+":6080") : ("http://111.204.37.131:5051");
        var wms = new AMap.TileLayer.WMS({
          url: uUrl, // wms服务的url地址
          // url: 'http://111.204.37.131:5051/arcgis/services/WGGD/MapServer/WMSServer', // wms服务的url地址
          blend: false, // 地图级别切换时，不同级别的图片是否进行混合
          tileSize: 512, // 加载WMS图层服务时，图片的分片大小
          params: {
            styles:'default',
            'LAYERS': '0',
            VERSION:'1.3.0'
          } // OGC标准的WMS地图服务的GetMap接口的参数
        });
        wms.setMap(map);
        // loadModel()
      },
      //在地图上添加标注点
      addMarkerToMap(obj) {
        const self = this;
        const AMap = window.AMap;
        // 点标记显示内容，HTML要素字符串
        let dangerClass = obj.danger ? "danger" : "";
        var markerContent = `<div class="map-icon-marker ${dangerClass}" style="width:${obj
                .label.length + 5}em">
          <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
          <div class="map-icon-marker__label">
            ${obj.label} ${obj.count} 个
          </div>
      </div>`;
        var position = new AMap.LngLat(obj.positon[0], obj.positon[1]);
        var marker = new AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(2, -70)
        });
        this.markersList.push(marker);
        // 将 markers 添加到地图
        map.add(marker);
        AMap.event.addListener(marker, 'click', function(e) {
          console.log(e)
        })
      },
      //在地图上添加标注点
      addMarkerToMap4(obj) {
        const AMap = window.AMap;
        // 点标记显示内容，HTML要素字符串
        var markerContent = `<div class="map-panel-1">
      <div class="map-panel-content">
      <h3>顺义区南法信镇政府</h3>
<!--      <p>我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述我是描述</p>-->
      </div>
      </div>`;
        var position = new AMap.LngLat(obj.position[0], obj.position[1]);
        var marker = new AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-2, -340)
        });

        //   将 markers 添加到地图
        map.add(marker);

        //   var markerContent1 = `<div class="map-mini-marker"></div>`;
        //   var marker2 = new AMap.Marker({
        //     position: position,
        //     // 将 html 传给 content
        //     content: markerContent1,
        //     // 以 icon 的 [center bottom] 为原点
        //     offset: new AMap.Pixel(0, 0)
        //   });
        //   self.map.add(marker2);
      },
      //在地图上添加标注点
      addMarkerToMap7(obj) {
        const self = this;
        const AMap = window.AMap;
        // 点标记显示内容，HTML要素字符串
        var markerContent = `<div class="around-effect">
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      <div class="around-effect-item">
        <div class="around-effect-item-rotate">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
      </div>
      </div>`;
        //   var markerContent1 = `<div class="map-mini-marker"></div>`;
        var position = new AMap.LngLat(obj.position[0], obj.position[1]);
        var marker = new AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-200, -140)
        });
        //   var marker2 = new AMap.Marker({
        //     position: position,
        //     // 将 html 传给 content
        //     content: markerContent1,
        //     // 以 icon 的 [center bottom] 为原点
        //     offset: new AMap.Pixel(0, 0)
        //   });
        // 将 markers 添加到地图
        map.add(marker);
        //   self.map.add(marker2);
      },
      //在地图上添加标注点
      addMarkerToMap8(obj) {
        const self = this;
        const AMap = window.AMap;
        // 点标记显示内容，HTML要素字符串
        var markerContent = `<div class="map-panel-2">
      <div class="map-panel-content">
      <h4 class="y-title">北京市顺义区</h4>
      <p class="y-sTitle">南法信镇政府</p>
      </div>
      </div>`;
        var position = new AMap.LngLat(obj.position[0], obj.position[1]);
        var marker = new AMap.Marker({
          position: position,
          // 将 html 传给 content
          content: markerContent,
          // 以 icon 的 [center bottom] 为原点
          offset: new AMap.Pixel(-133, -192)
        });

        //   将 markers 添加到地图
        map.add(marker);

      },
      removeMapMarkers() {
        // map.removeMarkers();
      },
      //获取index数据
      getIndexdata() {
        setTimeout(() => {
          this.getMapDatas();
          //首页里的chart图，获取到数据后按照以下格式给值

        });
      },
      //获取地图上数据
      getMapDatas() {
        this.mapDataLoading = true;
        setTimeout(() => {
          this.mapDataLoading = false;
          this.mapPoints = [
            { label: "西杜兰村", count: 15, positon: [116.59502580648707, 40.14697789849136] },
            { label: "三家店村", count: 17, positon: [116.61262110795957,40.14993015449165] },
            { label: "南卷村", count: 20, positon: [116.62446575430846,40.15399759618978] },
            { label: "东杜兰村", count: 23, positon: [116.6050894529534,40.14615773975543] },
            { label: "西海洪村", count: 26, positon: [116.62000247481868,40.145600089333314] },
            { label: "东海洪村", count: 32, positon: [116.62369320316401,40.1410072132005] },
            { label: "北法信村", count: 32, positon: [116.61360808696237,40.13736554348905] },
            { label: "大江洼村", count: 32, positon: [116.59880232394205,40.135495461869105] },
            { label: "焦各庄村", count: 32, positon: [116.60794331077992,40.13277217936702] },
            { label: "刘家河村", count: 32, positon: [116.61189149628572,40.12830969412716] },
            { label: "南法信村", count: 32, positon: [116.60880165103403,40.11908859518438] }
          ];
          this.regionList = [
            { id: "00000", label: "全镇" },
            { id: "00001", label: "南卷村" },
            { id: "00002", label: "三家店村" },
            { id: "00003", label: "西杜兰村" },
            { id: "00004", label: "东杜兰村" },
            { id: "00005", label: "西海洪村" },
            { id: "00006", label: "东海洪村" },
            { id: "00007", label: "北法信村" },
            { id: "00008", label: "南法信村" },
            { id: "00009", label: "大江洼村" },
            { id: "00010", label: "焦各庄村" },
            { id: "00011", label: "刘家河村" }
          ];
          //类型列表
          this.typeOptions = [
            {
              value: "请选择",
              label: "请选择",
            },
            {
              value: "部件",
              label: "部件",
              children: [
                {
                  value: "全部类型",
                  label: "全部类型"
                },
                {
                  value: "公共设施",
                  label: "公共设施"
                },
                {
                  value: "道路交通",
                  label: "道路交通"
                },
                {
                  value: "市容环境",
                  label: "市容环境"
                },
                {
                  value: "园林绿化",
                  label: "园林绿化"
                },
                {
                  value: "房屋土地",
                  label: "房屋土地"
                },
                {
                  value: "其他设施",
                  label: "其他设施"
                }
              ]
            },
            {
              value: "事件",
              label: "事件",
              children: [
                {
                  value: "全部类型",
                  label: "全部类型"
                },
                {
                  value: "市容环境",
                  label: "市容环境"
                },
                {
                  value: "宣传广告",
                  label: "宣传广告"
                },
                {
                  value: "施工管理",
                  label: "施工管理"
                },
                {
                  value: "突发事件",
                  label: "突发事件"
                },
                {
                  value: "街面秩序",
                  label: "街面秩序"
                },
                {
                  value: "12345热线类",
                  label: "12345热线类"
                },
                {
                  value: "重点工作",
                  label: "重点工作"
                },
                {
                  value: "应急处置",
                  label: "应急处置"
                }
              ]
            }
          ];
          this.removeMapMarkers()
          for (var i in this.mapPoints) {
            let item = this.mapPoints[i];
            this.markersList.push(item);
            //this.addMarkerToMap(item);
          }
        }, 500);
      },
      //底部仪表盘
      dashboardChartInit(dashboard1, value, title) {
        this[dashboard1] = this.$echarts.init(this.$refs[dashboard1]);
        this[dashboard1].setOption({
          tooltip: {
            formatter: "{a} <br/>{b} : {c}%"
          },
          series: [
            {
              name: "问题来源",
              type: "gauge",
              startAngle: 190,
              endAngle: -10,
              minInterval: 1,
              radius: "95%",
              center: ["50%", "64%"],
              axisLine: {
                show: true,
                lineStyle: {
                  color: [
                    [0, "lime"],
                    [0.82, "#006AF3"],
                    [1, "#11FFBC"]
                  ],
                  width: 18
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              title: {
                show: false
              },
              pointer: {
                length: "60%"
              },
              detail: {
                formatter: "{value}%",
                shadowBlur: 50,
                shadowColor: "rgba(0, 0, 0, 0.1)",
                textStyle: {
                  color: "#2cf5ff",
                  fontSize: 20
                }
              },
              data: [{ value: value, name: title }]
            }
          ]
        });
      },
      //饼图
      pieChartInit(pieData, legendData) {
        this.indexPieChart = this.$echarts.init(this.$refs.indexPie);
        this.indexPieChart.setOption({
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },

          legend: {
            orient: "vertical",
            left: "58%",
            top: 20,
            textStyle: {
              color: "#2cf5ff",
              fontSize: 10,
              lineHeight: 14
            },
            data: legendData
          },

          series: [
            {
              colors: ["#f00", "#f00"],
              name: "问题来源",
              type: "pie",
              radius: "75%",
              center: ["32%", "50%"],
              avoidLabelOverlap: false,
              data: pieData.sort(function(a, b) {
                return a.value - b.value;
              }),
              roseType: "radius",
              // roseType: 'area',
              label: {

                show: false
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                color: ["#006AF3"],
                shadowBlur: 50,
                shadowColor: "rgba(0, 0, 0, 0.1)",
                normal: {
                  color: function(params) {
                    // var colorList = [
                    //   "#006af3","#01b1ff","#2d29ef","#3e9aff", "#2cf5ff", "#11ffbc", "#2d29ef"
                    // ];
                    var colorList = [
                      "#01b1ff", "#2d29ef","#2d29ef","#3e9aff","#006af3", "#2cf5ff", "#3757e5","#10bfcf",
                      "#27A1D3",
                      "#4171FF", "#8458FF","#CC1EFF","#FF07A5","#FF0460"
                    ];
                    return colorList[params.dataIndex]
                  },
                }
              },

              animationType: "scale",
              animationEasing: "elasticOut",
              animationDelay: function(idx) {
                return Math.random() * 200;
              }
            }
          ]
        });
      },
      //右侧柱图1
      rightBarChart1Init(jieArr, liArr, yLabels) {
        let barMinHeight = 0;
        this.rightBarChart1 = this.$echarts.init(this.$refs.rightBarChart1);
        this.rightBarChart1.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          legend: {
            data: []
          },
          grid: {
            left: "0%",
            right: "20%",
            bottom: "5%",
            top: "5%",
            containLabel: true
          },

          xAxis: {
            type: "value",
            show: false,
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            type: "category",
            data: yLabels,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              textStyle: {
                color: "#2cf5ff"
              }
            }
          },
          series: [
            {
              name: "结案",
              type: "bar",
              stack: "总量",
              barMinHeight: barMinHeight,
              itemStyle: {
                normal: {
                  color: "#2cf5ff"
                }
              },
              // label: {
              //   show: true,
              //   position: "right",
              //   formatter: "结案" + "{c}",
              //   textStyle: {
              //     color: "#2cf5ff",
              //     fontSize: 12
              //   }
              // },
              data: jieArr
            },
            {
              name: "立案",
              type: "bar",
              stack: "总量",
              barWidth: "12px",
              barMinHeight: barMinHeight,
              barGap: "45%", //柱图间距
              itemStyle: {
                normal: {
                  color: ["#2C2CB8"]
                }
              },
              label: {
                show: true,
                formatter: function(obj) {
                  return (
                          "结" +
                          jieArr[obj.dataIndex] +
                          "/ " +
                          "立" +
                          liArr[obj.dataIndex]
                  );
                },
                position: "right",
                textStyle: {
                  color: "#2cf5ff",
                  fontSize: 10,
                  rich: {
                    count: {
                      color: "#7bf7fb",
                      width: 20
                    }
                  }
                }
              },
              data: liArr
            }
          ]
        });
      },
      //右侧柱图2
      rightBarChart2Init(jieArr, liArr, xLabels) {
        this.rightBarChart2 = this.$echarts.init(this.$refs.rightBarChart2);
        this.rightBarChart2.setOption({
          legend: {
            textStyle: {
              color: "#2cf5ff",
              fontSize: 12
            },
            data: ["立案", "结案"],
            itemWidth: 16, // 图例图形宽度
            itemHeight: 13,
            itemGap: 30
          },
          tooltip: {},
          grid: {
            left: "5%",
            right: "5%",
            bottom: "5%",
            top: "20%",
            containLabel: true
          },
          xAxis: {
            type: "category",
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              textStyle: {
                color: "#2cf5ff"
              }
            },
            data: xLabels
          },
          yAxis: {
            axisLine: {
              show: false,
              onZero: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ["#381F8C"]
              }
            },
            axisLabel: {
              show: true,
              fontSize: 10,
              textStyle: {
                color: "#2cf5ff"
              }
            }
          },
          series: [
            {
              type: "bar",
              barWidth: "12px",
              name: "立案",
              itemStyle: {
                normal: {
                  color: "#0272F8"
                }
              },
              data: jieArr
            },
            {
              type: "bar",
              barWidth: "12px",
              name: "结案",
              barGap: "45%",
              itemStyle: {
                normal: {
                  color: "#29E6B4"
                }
              },
              data: liArr
            }
          ]
        });
      },
      //右侧曲线图
      rightLineChartInit(jieArr, liArr, xLabels) {
        this.rightLineChart = this.$echarts.init(this.$refs.rightLineChart);
        this.rightLineChart.setOption({
          tooltip: {
            trigger: "axis"
          },
          legend: {
            textStyle: {
              color: "#2cf5ff",
              fontSize: 12
            },
            itemWidth: 16, // 图例图形宽度
            itemHeight: 13,
            itemGap: 30,
            data: ["立案", "结案"]
          },
          grid: {
            left: "5%",
            right: "5%",
            bottom: "5%",
            top: "20%",
            containLabel: true
          },

          xAxis: {
            type: "category",
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#381F8C"]
              }
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              textStyle: {
                color: "#2cf5ff"
              }
            },
            data: xLabels
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#381F8C"]
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ["#381F8C"]
              }
            },
            axisLabel: {
              show: true,
              fontSize: 12,
              textStyle: {
                color: "#2cf5ff"
              }
            }
          },
          series: [
            {
              name: "立案",
              type: "line",
              smooth: true,
              data: liArr,
              itemStyle: {
                normal: {
                  color: "#019CF2"
                }
              }
            },
            {
              name: "结案",
              type: "line",
              smooth: true,
              data: jieArr,
              itemStyle: {
                normal: {
                  color: "#29E797"
                }
              }
            }
          ]
        });
      },
      //左侧六个数字点击
      indexNumClickHandler(item, index) {
        this.activeNum = index;
        switch (index) {
          case 0:
          case 1:
          case 2:
            //上报、立案、结案
            //this.getMapDatas();
            break;
          case 3:
            //人员
            this.$router.push({
              name: "MonitorsIndex"
            });
            break;
          case 4:
          case 5:
            this.$router.push({
              name: "VideomonitorIndex"
            });
          default:
            break;
        }
      },
      //三维模型
      init3D(){
        //三维模型
        return false
        object3Dlayer = new AMap.Object3DLayer();
        map.plugin(["AMap.GltfLoader"], function () {
          var gltfObj = new AMap.GltfLoader();
          let xlf = 'gltf/xlf.gltf';//铭翔大厦（炫立方）
          let hggjds = 'gltf/hggjds.gltf';//航港国际大厦
          let tbzx = 'gltf/tbzx.gltf';//天博中心
          let dgxz = 'gltf/dgxz.gltf';//东港鑫座
          let jdcjy = 'gltf/jdcjy.gltf';//机动车交易中心
          let mhkd = 'gltf/mhkd.gltf';//民航快递大楼
          let sjds = 'gltf/sjds.gltf';//顺捷大厦
          let xhkgzx = 'gltf/xhkgzx.gltf';//旭辉空港中心
          let hyhc = 'gltf/hyhc.gltf';//宏远航城广场
          let htys = 'gltf/htys.gltf';//海天一色
          let htds = 'gltf/htds.gltf';//恒通大厦
          let hylk = 'gltf/hylk.gltf';//宏远临空总部港
          //let xhkgzx = 'gltf/xhkgzx.gltf';//旭辉26街区
          let zzf = 'gltf/zzf.gltf';//镇政府
          let dyshgj = 'gltf/dyshgj.gltf';//东亚首航国际
          let dtz = 'gltf/dtz.gltf';//地铁站

          let xlfCity = {
            position: new AMap.LngLat(116.612808,40.116193), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let hggjdsCity = {
            position: new AMap.LngLat(116.608491,40.114936), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let tbzxCity = {
            position: new AMap.LngLat(116.608757,40.127434), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let dgxzCity = {
            position: new AMap.LngLat(116.612611,40.12008), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let jdcjyCity = {
            position: new AMap.LngLat(116.598063,40.120829), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let mhkdCity = {
            position: new AMap.LngLat(116.605804,40.109424), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let sjdsCity = {
            position: new AMap.LngLat(116.612764,40.118513), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let xhkgzxCity = {
            position: new AMap.LngLat(116.611062,40.114925), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let hyhcCity = {
            position: new AMap.LngLat(116.608712,40.112749), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          // let htysCity = {
          //   position: new AMap.LngLat(116.612611,40.12008), // 必须
          //   scale: 8, // 非必须，默认1
          //   height: 0,  // 非必须，默认0
          //   scene: 0, // 非必须，默认0
          // };
          let htdsCity = {
            position: new AMap.LngLat(116.597771,40.120127), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let hylkCity = {
            position: new AMap.LngLat(116.615019,40.120144), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let zzfCity = {
            position: new AMap.LngLat(116.610771,40.11885), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let dyshgjCity = {
            position: new AMap.LngLat(116.598415,40.129129), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          let dtzCity = {
            position: new AMap.LngLat(116.609271,40.128459), // 必须
            scale: 8, // 非必须，默认1
            height: 0,  // 非必须，默认0
            scene: 0, // 非必须，默认0
          };
          gltfObj.load(xlf, function (gltfCity) {
            gltfCity.setOption(xlfCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(hggjds, function (gltfCity) {
            gltfCity.setOption(hggjdsCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(tbzx, function (gltfCity) {
            gltfCity.setOption(tbzxCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(dgxz, function (gltfCity) {
            gltfCity.setOption(dgxzCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(jdcjy, function (gltfCity) {
            gltfCity.setOption(jdcjyCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(mhkd, function (gltfCity) {
            gltfCity.setOption(mhkdCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(sjds, function (gltfCity) {
            gltfCity.setOption(sjdsCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(xhkgzx, function (gltfCity) {
            gltfCity.setOption(xhkgzxCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(hyhc, function (gltfCity) {
            gltfCity.setOption(hyhcCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          // gltfObj.load(htys, function (gltfCity) {
          //   gltfCity.setOption(htysCity);
          //   gltfCity.rotateX(90);
          //   // gltfCity.rotateY(90);
          //   gltfCity.rotateZ(0);
          //   object3Dlayer.add(gltfCity);
          // });
          gltfObj.load(htds, function (gltfCity) {
            gltfCity.setOption(htdsCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(hylk, function (gltfCity) {
            gltfCity.setOption(hylkCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(zzf, function (gltfCity) {
            gltfCity.setOption(zzfCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(dyshgj, function (gltfCity) {
            gltfCity.setOption(dyshgjCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });
          gltfObj.load(dtz, function (gltfCity) {
            gltfCity.setOption(dtzCity);
            gltfCity.rotateX(90);
            // gltfCity.rotateY(90);
            gltfCity.rotateZ(0);
            object3Dlayer.add(gltfCity);
          });

        });
        map.add(object3Dlayer);
        //End 三维模型
      },
      //移除3D模型
      remove3D(){
        //object3Dlayer.remove(gltfCity);
      },
      //图层切换
      showHotMap(){
        this.showHot = !this.showHot
        if(this.showHot){
          this.heatmap.show()
        }else {
          this.heatmap.hide()
        }
      },
      getSqDataNum(firsttime, lasttime){
        debugger
        this.$http.get(this.baseUrl.ajxxUrl, {
          params: {
            firsttime: firsttime,
            lasttime: lasttime
          }
        }).then((rel)=>{
          let all = rel.data
        }).catch((e)=>{
          this.$alert('查询数据网格失败,请重试', this.getTitle.title, {
            confirmButtonText: '确定'
          });
          return;
        })
      },
      //热力图
      hotMap(f, e){
        let self = this
        if(self.heatmap != null){
          self.heatmap.setMap(null);
        }
        let sql = "select sq,sum(n) as num from " +
                "(select sq,count(1) as n from ajdj where sq is not null and sbsj between to_date('"+f+"','yyyy-MM-dd') and to_date('"+e+"','yyyy-MM-dd') group by sq union all select sq,count(1) from rxaj where sq is not null and sbsj between to_date('"+f+"','yyyy-MM-dd') and to_date('"+e+"','yyyy-MM-dd') group by sq ) group by sq;"
        let hotData = runSQLJd(sql);
        let heatmapData = []
        if(hotData[0].length) {
          debugger
          for (let i = 0; i < hotData[0].length; i++) {
            let lng = this.sqArrs.find((obj) => {
              return obj.title == hotData[0][i].SQ
            })
            let lat = this.sqArrs.find((obj) => {
              return obj.title == hotData[0][i].SQ
            })
            if (lng != undefined) {
              heatmapData.push({
                "lng": lng.position[0],
                "lat": lat.position[1],
                "count": hotData[0][i].NUM
              })
            }
          }
        }
       map.plugin(["AMap.Heatmap"], function() {
         //初始化heatmap对象
         self.heatmap = new AMap.Heatmap(map, {
           radius: 100, //给定半径
           opacity: [0, 0.8]
           /*,
           gradient:{
               0.5: 'blue',
               0.65: 'rgb(117,211,248)',
               0.7: 'rgb(0, 255, 0)',
               0.9: '#ffea00',
               1.0: 'red'
           }
            */
         });
         //设置数据集
         self.heatmap.setDataSet({
           data: heatmapData,
           max: 5
         });
       });
      },
      getIndexData(firsttime, lasttime, wtlx, dl){
        this.$http.get(this.baseUrl.tjurl, {
          params: {
            firsttime: firsttime,
            lasttime: lasttime
          }
        }).then((response)=> {
          //左侧数量
          debugger
          this.indexNums[0].value = response.data.JDZXT_AJTJ[0].ZS
          this.indexNums[1].value = response.data.JDZXT_AJTJ[0].LAS
          this.indexNums[2].value = response.data.JDZXT_AJTJ[0].JAS
          this.indexNums[3].value = response.data.JDZXT_AJTJ[1].TBHUMAN//监督员
          this.indexNums[4].value = 0//车辆
          //
          //事件、部件仪表盘
          let wtlxData = response.data.JDZXT_WTLXTJ
          this.wtlxArr = []
          for(let i=0;i<wtlxData.length;i++){
            if(wtlxData[i].WTLX == '事件'){
              let czl = (wtlxData[i].LAS / wtlxData[i].ZS * 100).toFixed(2)
              this.wtlxArr.push({
                ycz: wtlxData[i].ZS,
                cz: wtlxData[i].LAS,
                czl: czl,
                title: wtlxData[i].WTLX
              })
              this.dashboardChartInit("dashboard1", czl, wtlxData[i].WTLX);
            }else{
              let czl = (wtlxData[i].LAS / wtlxData[i].ZS * 100).toFixed(2)
              this.wtlxArr.push({
                ycz: wtlxData[i].ZS,
                cz: wtlxData[i].LAS,
                czl: czl,
                title: wtlxData[i].WTLX
              })
              this.dashboardChartInit("dashboard2", czl, wtlxData[i].WTLX);
            }
          }
          if(wtlxData.length == 0){
            this.dashboardChartInit("dashboard1", 0, '事件');
            this.dashboardChartInit("dashboard2", 0, '部件');
          }else if(wtlxData.length == 1){
            if(wtlxData[0].WTLX== '事件'){
              this.dashboardChartInit("dashboard2", 0, '部件');
            }else{
              this.dashboardChartInit("dashboard1", 0, '部件');
            }

          }
          if(this.wtlxArr.find((obj)=>{return obj.title == '事件'}) != undefined){
            this.sjcz = this.wtlxArr.find((obj)=>{return obj.title == '事件'}).cz
            this.sjycz = this.wtlxArr.find((obj)=>{return obj.title == '事件'}).ycz
            this.sjczl = this.wtlxArr.find((obj)=>{return obj.title == '事件'}).czl
          }else{
            this.sjcz = 0
            this.sjycz = 0
            this.sjczl = 0
          }
          if(this.wtlxArr.find((obj)=>{return obj.title == '部件'}) != undefined){
            this.bjcz = this.wtlxArr.find((obj)=>{return obj.title == '部件'}).cz
            this.bjycz = this.wtlxArr.find((obj)=>{return obj.title == '部件'}).ycz
            this.bjczl = this.wtlxArr.find((obj)=>{return obj.title == '部件'}).czl
          }else{
            this.bjcz = 0
            this.bjycz = 0
            this.bjczl = 0
          }

          //问题来源
          let wtlyData = response.data.JDZXT_WTLYTJ
          let wtlyArr = []
          let wtlyTitleArr = []
          for(let i=0;i<wtlyData.length;i++){
            wtlyArr.push({
              value: wtlyData[i].ZS,
              name: wtlyData[i].WTLY
            })
            wtlyTitleArr.push(wtlyData[i].WTLY)
          }
          this.pieChartInit(wtlyArr, wtlyTitleArr)
          //高发问题
          let  gfwtData = response.data.JDZXT_GFWTTJ
          let gfwtLa = []
          let gfwtJa = []
          let gfwtTitle = []
          for(let i=0;i<gfwtData.length;i++){
            gfwtLa.push(gfwtData[i].LAS)
            gfwtJa.push(gfwtData[i].JAS)
            gfwtTitle.push(gfwtData[i].XL)
          }
          this.rightBarChart1Init(gfwtJa, gfwtLa, gfwtTitle)
          //高发区域
          let gfqyData = response.data.JDZXT_GFQYTJ
          let gfqyLa = []
          let gfqyJa = []
          let gfqyTitle = []
          for(let i=0;i<gfqyData.length;i++){
            gfqyLa.push(gfqyData[i].LAS)
            gfqyJa.push(gfqyData[i].JAS)
            gfqyTitle.push(gfqyData[i].SQ)
          }
          this.rightBarChart2Init( gfqyLa, gfqyJa, gfqyTitle);
          //高发时段
          let gfsdData = response.data.JDZXT_GFSDTJ
          let gfsdLa = []
          let gfsdJa = []
          let gfsdTitle = []
          for(let i=0;i<gfsdData.length;i++){
            gfsdLa.push(gfsdData[i].LAS)
            gfsdJa.push(gfsdData[i].JAS)
            gfsdTitle.push(gfsdData[i].SBSJH+"时")
          }
          this.init3D()
          this.rightLineChartInit(gfsdJa, gfsdLa, gfsdTitle)
        }).catch( (error)=> {
          console.log(error);
        });
/*        this.$http.get(this.baseUrl.ajxxUrl, {
          params: {}
        }).then((rel)=>{
          for(let i in rel.data){
            this.jhArr.push(
                    new AMap.Marker({
                      position: [rel.data[i].X,rel.data[i].Y],
                      content: '<div style="background-color: hsla(180, 100%, 50%, 0.7); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;"></div>',
                      offset: new AMap.Pixel(-15, -15)
                    })
            )
            var count = this.jhArr.length;
            var _renderClusterMarker = function (context) {
              var factor = Math.pow(context.count / count, 1 / 18);
              var div = document.createElement('div');
              var Hue = 180 - factor * 180;
              var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
              var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
              var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
              var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
              div.style.backgroundColor = bgColor;
              var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
              div.style.width = div.style.height = size + 'px';
              div.style.border = 'solid 1px ' + borderColor;
              div.style.borderRadius = size / 2 + 'px';
              div.style.boxShadow = '0 0 1px ' + shadowColor;
              div.innerHTML = context.count;
              div.style.lineHeight = size + 'px';
              div.style.color = fontColor;
              div.style.fontSize = '14px';
              div.style.textAlign = 'center';
              context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
              context.marker.setContent(div)
            };
            var sts = [{
              url: "images/green.gif",
              size: new AMap.Size(60, 60),
              offset: new AMap.Pixel(-30, -30)
            }, {
              url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
              size: new AMap.Size(36, 36),
              offset: new AMap.Pixel(-18, -18)
            },{
              url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
              size: new AMap.Size(48, 48),
              offset: new AMap.Pixel(-24, -24)
            }];
            // var cluster = new AMap.MarkerClusterer(map, this.jhArr, {
            //   styles: sts,
            //   gridSize: 120,
            //   minClusterSize: 1
            // });
          }
          //

        }).catch((error)=>{
          console.log(error)
        })*/
        //


        this.getSqDataNum(this.firsttime, this.lasttime)
      }
    }
  };
</script>

<style lang="less">
  @import "../../css/mixin.less";
  @keyframes corrugated2 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(180deg);
    }
  }
  .fadeInUpA();
  .fadeInDownA();
  .index-lefter {
    position: absolute;
    left: 0;
    top: 1rem;
    z-index: 5;
  }
  .index-nums-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #01d4f9;
    min-height: calc(100vh - 6.3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    li {
      padding: 0;
      margin: 0;
      width: 10.7rem;
      height: 5.9rem;
      display: flex;
      justify-content: center;
      align-items: center;
      background-image: url(../../../public/images/leftNumBg.png);
      background-size: 100% 100%;
      flex-direction: column;
      position: relative;
      padding-top: 0.2rem;
      box-sizing: border-box;
      cursor: pointer;
      transition: all 0.3s;
      animation-duration: 0.2s;
      &:nth-child(1),
      &:nth-child(6) {
        animation-delay: 0.2s;
      }
      &:nth-child(2),
      &:nth-child(5) {
        animation-delay: 0.4s;
      }
      &:nth-child(3),
      &:nth-child(4) {
        animation-delay: 0.6s;
      }
      &:nth-child(3n) {
        margin-bottom: 1rem;
      }
      &:hover {
        opacity: 0.8;
      }
      &:last-child {
        &::after {
          display: none;
        }
      }
      &.active {
        color: #d6ff61;
      }
      .num {
        font-size: 2rem;
      }
      .label {
        font-size: 1rem;
      }
    }
  }

  .index-bottom {
    left: 10.5rem;
    bottom: 1.5rem;
    right: 27rem;
    position: absolute;
    display: flex;
    z-index: 5;
    .zm-box1 {
      flex: 1;
      margin-left: 0.75rem;
      margin-right: 0.75rem;
    }
  }

  .index-dashboard {
    display: flex;
    &-box {
      flex: 1;
    }
    &-nums {
      ul {
        display: flex;
        margin: 0;
        list-style: none;
        padding: 0 0.75rem;
        li {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          font-size: 1.2rem;
          &:first-child {
            .num {
              color: #86ff8a;
              font-weight: bold;
            }
          }
          .num {
            font-size: 1.2rem;
            color: #6bf5fa;
          }
          .label {
            font-size: 0.7rem;
            color: #86b0fc;
          }
        }
      }
    }
  }
  .index-pie {
    display: flex;
    position: relative;
    &-box1 {
      flex: 1.5;
    }
    &-box2 {
      flex: 1;
    }
  }

  /* Created by yinchy @2020/10/26 15:21
     Description 饼图加图例
   */
  .index-tuli{
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 180px;
    height: 180px;
  }

  .index-right {
    position: absolute;
    z-index: 5;
    right: 1rem;
    top: 0;
    width: 25rem;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 5.8rem);
    .zm-box2 {
      flex: 1;
      margin: 0.3rem 0;
      text-align: center;
    }
    .index-right-chart-box {
      height: 100%;
    }
  }

  .map-icon-marker {
    width: 100px;
    height: 24px;
    background-color: #e68119;
    border-radius: 2px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    position: relative;
    &.danger {
      background-color: #fe2c8e;
      .map-icon-marker__icon {
        background-color: #ff4a9e;
      }
      &::after,
      &::before {
        background-color: #ff4a9e;
      }
    }
    &::after {
      content: "";
      display: block;
      height: 50px;
      width: 1px;
      background-color: #ffa141;
      position: absolute;
      top: 100%;
      left: 0px;
      z-index: 1;
    }
    &::before {
      content: "";
      display: block;
      height: 5px;
      width: 5px;
      background-color: #ffa141;
      position: absolute;
      bottom: -50px;
      left: -2px;
      z-index: 1;
      border-radius: 5px;
    }
    &__icon {
      width: 24px;
      height: 24px;
      border-radius: 2px;
      background-color: #ffa141;
      color: #fff;
      font-size: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      transform: rotate(45deg);
      margin-left: -12px;
      z-index: 3;
      i {
        transform: rotate(-45deg);
      }
    }
    &__label {
      flex: 1;
      width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .changeTc{
    position: fixed;
    top: 52%;
    right: 30%;
    z-index: 50;
    width: 80px;
    height: 80px;
  }
  //marker4
  .map-panel-1 {
    z-index: 555;
    width: 370px;
    height: 345px;
    background-image: url(../../../public/images/huan/panel-bg.png);
    background-size: 100% auto;
    .map-panel-content {
      padding-left: 90px;
      padding-right: 80px;
      height: 140px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      text-shadow: 0 1px 20px #2cf5ff;
      color: #2cf5ff;
      flex-direction: column;
      h2 {
        margin: 0;
      }
    }
  }
  //marker7
  .around-effect {
    position: relative;
    &:hover {
      .around-effect-item {
        opacity: 1;
        &:nth-child(2) {
          top: -30px;
        }
        &:nth-child(3) {
          opacity: 1;
          top: -60px;
        }
        &:nth-child(4) {
          opacity: 1;
          top: -90px;
        }
      }
    }
    .around-effect-item {
      transform: rotateX(70deg) translateZ(30px);
      border-radius: 500px;
      width: 400px;
      height: 400px;
      position: absolute;
      left: 0;
      top: 0;
      border: solid 3px #7d7eff;
      opacity: 0.3;
      transition: all 0.5s;
      .around-effect-item-rotate {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        animation-name: corrugated2;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
      }
      span {
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;

        &::after,
        &::before {
          left: 0;
          top: 50%;
          content: "";
          display: block;
          width: 12px;
          height: 12px;
          background-color: #7d7eff;
          position: absolute;
          margin-left: -6px;
          margin-right: 0;
          margin-top: -6px;
          transform: rotate(45deg);
          animation-name: corrugated2;
          animation-duration: 0.5s;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        &::before {
          left: auto;
          right: 0;
          margin-left: 0;
          margin-right: -6px;

        }
        &:nth-child(1) {
          transform: rotate(30deg);
        }
        &:nth-child(2) {
          transform: rotate(60deg);
        }
        &:nth-child(3) {
          transform: rotate(90deg);
        }
        &:nth-child(4) {
          transform: rotate(-60deg);
        }
        &:nth-child(5) {
          transform: rotate(-30deg);
        }
      }
      &:nth-child(1) {
        opacity: 1;
      }
      &:nth-child(2) {
        width: 300px;
        height: 300px;
        left: 50px;
        top: 50px;
        background-image: radial-gradient(
                ellipse,
                rgba(125, 126, 265, 0),
                rgba(125, 126, 265, 0.2),
                rgba(125, 126, 265, 1)
        );
      }
      &:nth-child(3) {
        width: 200px;
        height: 200px;
        background-image: radial-gradient(
                ellipse,
                rgba(125, 126, 265, 0),
                rgba(125, 126, 265, 0.2),
                rgba(125, 126, 265, 1)
        );
        left: 100px;
        top: 100px;
      }
      &:nth-child(4) {
        width: 100px;
        height: 100px;
        background-image: radial-gradient(
                ellipse,
                rgba(125, 126, 265, 0),
                rgba(125, 126, 265, 0.2),
                rgba(125, 126, 265, 1)
        );
        left: 150px;
        top: 150px;
      }
    }
  }
  .map-panel-2 {
    width: 230px;
    height: 194px;
    background-image: url(../../../public/images/huan/box-bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    .map-panel-content {
      padding: 2px 20px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      text-shadow: 0 1px 20px #2cf5ff;
      color: #2cf5ff;
      flex-direction: column;
      h2 {
        margin: 0;
      }
      p {
        margin-top: 5px;
      }
    }
  }
  .y-title{
    font-size: 16px !important;
  }
  .chaxuntiaojian{
    position: fixed;
    top: 4rem;
    left: 1rem;
    z-index: 10;
    width: 20rem;
    height: 30px;
    display: flex;
    align-items: center;
  }
</style>
